<template>
    <div class="plantBox">
       <div class="partDig">
                 <div v-for="(item,index) in values" :key="item.id" class="news-item">
                  <div class="top-contain">
                    <img :src="item.img" alt="" class="news-img">
                    <div class="news-msg">
                      <div class="news-title">
                        <div class="news-names">{{ item.title }}</div>
                        <img src="../assets/xiala.png" class="bth-img" alt="" @click="bthBtom(item,index)" :style="{transform:item.state=='1'?'rotate(90deg)':'rotate(0deg)'}">
                      </div>
                      <div class="news-content">{{ item.introduce }}</div>
                    </div>
                  </div>
                  <div class="bom-contain" v-html="item.content" :style="{height:item.state=='1'?'480px':'0px',padding:item.state=='1'?'20px':'0px'}"></div>
                 </div>
       </div>
   </div>
   </template>
   <script>
   export default {
       props:{values:Array},
       data() {
           return {
               listArray:[]
           }
       },
       mounted() {
       },
       methods:{
        bthBtom(item,index){
          if(item.state == 1){
            item.state = 2
          }else{
            item.state = 1
          }
        }
       }
   }
   </script>
   <style lang="less" scoped>
   .plantBox{
       width: 100%;
       .partDig {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
   
     .news-item {
       width: 100%;
       padding: 30px 10px 30px 0;
       border-bottom: 2px dotted rgba(49, 106, 92, .8);
      .top-contain{
         width: 100%;
         display: flex;
         gap: 20px;
        .news-img {
         width: 100px;
         height: 100px;
         border: 1px solid #18634B;
         border-radius: 8px;
         overflow: hidden;
       }
   
       .news-msg {
         flex: 1;
         font-size: 20px;
         font-weight: 500;
         color: #FFFFFF;
   
         .news-title {
           width: 100%;
           display: flex;
           justify-content: space-between;
           align-items: center;
   
           .news-names {
             flex: 1;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
             font-size: 18px;
           }
   
           .bth-img {
             width: 12px;
             height: 19px;
             cursor: pointer;
             transform: rotate(0deg);
             transition: all 0.5s;
           }
         }
   
         .news-content {
           flex: 1;
           font-size: 14px;
           font-weight: 400;
           color: #BEBEBE;
           line-height: 20px;
           margin-top: 13px;
           overflow: hidden;
           /*隐藏多出部分文字*/
           text-overflow: ellipsis;
           /*用省略号代替多出部分文字*/
           display: -webkit-box;
           /* 显示多行文本容器 */
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           /*显示行数*/
         }
       }
      }
       .bom-contain{
            width: 100%;
            overflow: hidden;
            overflow-y: auto;
            
            color: #fff;
            transition: all 0.5s;
       }
       .bom-contain::-webkit-scrollbar{
  background-color: rgba(82,184,112,0.2);
  width: 3px;
}
.bom-contain::-webkit-scrollbar-button{
  display: none;
}
.bom-contain::-webkit-scrollbar-thumb{
  background-color: rgba(82,184,112,1);
  border-radius: 20px;
}
     }
   }
   }
   
   </style>